<template>
  <div>
    <!-- <navTop :headTitle="headTitle" :showBack="showBack" :bkParam="bkParam"></navTop> -->
    <section class="add_address_container">
      <section class="section_list">
        <span class="section_left">联系人</span>
        <section class="section_right">
          <input type="text" placeholder="你的名字" v-model="lxrxm" class="input_style">
          <div class="choose_sex">
            <span class="choose_option" @click="chooseSex(1)">
              <span>
                <svg fill="#ccc" :class="{choosed: sex == 1}" viewBox="0 0 1024 1024" version="1.1" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M512 0c70.5536 0 137.0112 13.2096 199.4752 39.6288s116.9408 62.8736 163.4304 109.3632c46.4896 46.4896 82.944 100.9664 109.3632 163.4304C1010.7904 374.9888 1024 441.4464 1024 512c0 70.5536-13.2096 137.0112-39.6288 199.4752-26.4192 62.464-62.8736 116.9408-109.3632 163.4304-46.4896 46.4896-100.9664 82.944-163.4304 109.3632S582.5536 1024 512 1024c-70.5536 0-137.0112-13.2096-199.4752-39.6288-62.464-26.4192-116.9408-62.8736-163.4304-109.3632-46.4896-46.4896-82.944-100.9664-109.3632-163.4304C13.2096 649.0112 0 582.5536 0 512c0-70.5536 13.2096-137.0112 39.6288-199.4752S102.6048 195.584 148.992 148.992c46.4896-46.4896 100.9664-82.944 163.4304-109.3632C374.9888 13.2096 441.4464 0 512 0zM870.1952 307.712 798.0032 235.52 408.6784 624.9472 225.9968 439.9104 153.8048 512l254.7712 257.2288L870.1952 307.712z"></path></svg>
              </span>&nbsp;
              <span>先生</span>
            </span>
            <span class="choose_option" @click="chooseSex(2)">
              <span>
                <svg fill="#ccc" :class="{choosed: sex == 2}" viewBox="0 0 1024 1024" version="1.1" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M512 0c70.5536 0 137.0112 13.2096 199.4752 39.6288s116.9408 62.8736 163.4304 109.3632c46.4896 46.4896 82.944 100.9664 109.3632 163.4304C1010.7904 374.9888 1024 441.4464 1024 512c0 70.5536-13.2096 137.0112-39.6288 199.4752-26.4192 62.464-62.8736 116.9408-109.3632 163.4304-46.4896 46.4896-100.9664 82.944-163.4304 109.3632S582.5536 1024 512 1024c-70.5536 0-137.0112-13.2096-199.4752-39.6288-62.464-26.4192-116.9408-62.8736-163.4304-109.3632-46.4896-46.4896-82.944-100.9664-109.3632-163.4304C13.2096 649.0112 0 582.5536 0 512c0-70.5536 13.2096-137.0112 39.6288-199.4752S102.6048 195.584 148.992 148.992c46.4896-46.4896 100.9664-82.944 163.4304-109.3632C374.9888 13.2096 441.4464 0 512 0zM870.1952 307.712 798.0032 235.52 408.6784 624.9472 225.9968 439.9104 153.8048 512l254.7712 257.2288L870.1952 307.712z"></path></svg>
              </span>&nbsp;
              <span>女士</span>
            </span>
          </div>
        </section>
      </section>
      <section class="section_list">
        <span class="section_left">联系电话</span>
        <section class="section_right">
          <div class="phone_add">
            <input type="text" placeholder="你的手机号" class="input_style" maxlength="11"
              oninput="value=value.replace(/[^\d]/g,'')"
              v-model="lxrsj"
            ><i class="iconfont icon-jia" @click="phone_bk = !phone_bk"></i>
          </div>
          <input v-if="phone_bk" type="text" placeholder="备选电话" v-model="lxrgddh"
            class="input_style phone_bk"
          >
        </section>
      </section>
      <section class="section_list">
        <span class="section_left">送药地址</span>
        <section class="section_right">
          <address-list @address="chooseAddress"></address-list>
          <input type="text" placeholder="详细地址（如门牌号等）" v-model="addr" class="input_style">
        </section>
      </section>
      <section class="section_list">
        <span class="section_left">标签</span>
        <section class="section_right">
          <!-- <input type="text" name="tag" placeholder="无/家/学校/公司" v-model="tag"
            class="input_style"
          > -->
          <span class="tagSpan" @click="chooseTag('家')">家</span>
          <span class="tagSpan" @click="chooseTag('学校')">学校</span>
          <span class="tagSpan" @click="chooseTag('公司')">公司</span>
        </section>
      </section>
    </section>
    <!-- <div class="determine" @click="saveEditAddress">保存修改</div> -->
    <section class="edit_address">
      <mt-button size="large" type="primary" @click="saveEditAddress">保存修改</mt-button>
    </section>

    <transition name="tipMove">
      <alert-tip :alertText="alertText" v-if="showAlert" @closeTip="closeTip"></alert-tip>
    </transition>

  </div>
</template>
<script>
import navTop from '~/components/common/navTop';
import alertTip from '~/components/common/alertTip';
import addressList from '~/components/list/addressList';

export default {
  data() {
    return {
      showBack: true,
      bkParam: 'bk',
      headTitle: '编辑地址',
      alertText: '修改地址完成',
      showAlert: false,
      lxrxm: '', // 姓名
      sex: 1, // 性别
      lxrsj: '', // 电话
      address: null,
      addr: '',
      tag: '', // 备注
      tag_type: 1, // 备注类型
      phone_bk: false, // 是否选择备注电话
      lxrgddh: '', // 备注电话
      poi_type: 0,
      privincemc: '',
      citymc: '',
      streetmc: '',
      privincedm: '',
      citydm: '',
      streetdm: '',
      ts: this.newStore(),
      tq: this.getData(),
      reg: this.regular(),
      UAID: '',
    };
  },
  components: {
    navTop,
    alertTip,
    addressList,
  },
  created() {
    document.title = '地址修改';
    // 获取的地址信息这里，需要对addInfo进行JSON格式化
    const adrInfoJson = JSON.parse(`${this.$route.query.addInfo}`);
    this.uaid = `${adrInfoJson.UAID}`;
    this.opeFlag = '1';
    this.tag = `${adrInfoJson.TAG}`;
    this.lxrxm = `${adrInfoJson.LXRXM}`;
    this.privincemc = `${adrInfoJson.PRIVINCEMC}`;
    this.privincedm = `${adrInfoJson.PRIVINCEDM}`;
    this.citymc = `${adrInfoJson.CITYMC}`;
    this.citydm = `${adrInfoJson.CITYDM}`;
    this.streetmc = `${adrInfoJson.STREETMC}`;
    this.streetdm = `${adrInfoJson.STREETDM}`;
    this.addr = `${adrInfoJson.ADDR}`;
    this.lxrsj = `${adrInfoJson.LXRSJ}`;
    this.lxrgddh = `${adrInfoJson.LXRGDDH}`;
    this.lxremail = `${adrInfoJson.LXREMAIL}`;
    this.defaultbz = `${adrInfoJson.DEFAULTBZ}`;
    this.addralias = `${adrInfoJson.ADDRALIAS}`;
  },
  destroyed() {
  },
  methods: {
    // 获取地址信息
    /*
    getAddressInfo(UAID) {
      this.DATA.patient_id = `${UAID}`;
      this.tq.getPatInfo(this.DATA).then((ts) => {
        if (ts.d.RESULT == '200') {
          console.log('---------- 更新患者信息，获取的患者内容 ----------');
          console.log(JSON.stringify(ts.d));
          // 初始化需要修改的患者信息
          const patData = ts.d.DATAOBJ.DATA;
          this.patientInfo.patient_id = patData.PATIENT_ID;
          this.patientInfo.patient_age = patData.PATIENT_AGE;
          this.patientInfo.patient_name = patData.PATIENT_NAME;
          this.patientInfo.patient_csrq = patData.PATIENT_CSRQ; // 出生日期
          this.patientInfo.patient_sex = patData.PATSEX;
          this.patientInfo.card_num = patData.CARD_NUM; // 身份证号
          this.patientInfo.patient_mobile = patData.PATIENT_MOBILE;
          this.patientInfo.payment_type_name = patData.PAYMENT_TYPE; // 有无医保
        } else {
          this.$messagebox('提示', `修改失败: ${ts.d.RESULTTEXT}`);
        }
      });
    }, */
    chooseAddress(msg) {
      this.privincemc = msg.privincemc;
      this.citymc = msg.citymc;
      this.streetmc = msg.streetmc;
    },
    saveEditAddress() {
      if (!this.lxrxm) {
        this.showAlert = true;
        this.alertText = '请输入姓名';
        return;
      }
      if (!this.lxrsj) {
        this.showAlert = true;
        this.alertText = '请输入电话号码';
        return;
      }
      if (!this.addr) {
        this.showAlert = true;
        this.alertText = '请输入详细地址';
        return;
      }
      if (!this.tag) {
        this.showAlert = true;
        this.alertText = '请选择标签';
        return;
      }
      if (!this.reg.IsMobile(this.lxrsj)) {
        this.showAlert = true;
        this.alertText = '正确输入手机号';
        return;
      }
      const DATA = {
        uaid: this.uaid,
        opeFlag: '2',
        tag: this.tag,
        lxrxm: this.lxrxm,
        // "privincedm": "1234",
        privincemc: this.privincemc,
        citymc: this.citymc,
        // "citydm": "4567",
        streetmc: this.streetmc,
        // "streetdm": "001",
        addr: this.addr,
        lxrsj: this.lxrsj,
        lxrgddh: this.lxrgddh,
        lxremail: '',
        defaultbz: 'y',
        addralias: '',
      };
      this.tq.saveEditAddress(DATA,this).then((ts) => {
        /*         this.showAlert = true;
        this.alertText = '添加地址成功！'; */
        this.$messagebox('添加修改成功！');
        this.$router.go(-1);
      });
    },
    closeTip() {
      this.showAlert = false;
    },
    chooseSex(sex) {
      this.sex = sex;
    },
    chooseTag(tag) {
      this.tag = tag;
    },
  },
};
</script>
<style>
.iconfont{
  color:#ccc;
}
@keyframes tipMove {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.8);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
input::-webkit-input-placeholder {
  color: #aaa;
}
.add_address_container {
  padding-top: 0rem;
  background: #fff;
  font-size: 0.9rem;
  margin-bottom: 2rem;
}
.section_list {
  display: flex;
  border-bottom: 0.1rem solid #f1f1f1;
  margin: 0.4rem;
}
.section_left {
  color: #666;
  flex: 2;
  line-height: 3rem;
  text-align: left;
  margin: auto;
}
.section_right {
  flex: 5;
}
.section_right .tagSpan{
  background: #f1f1f1;
  width: 3rem;
  display: inline-block;
  margin-right: 0.6rem;
  text-align: center;
  font-size: 0.9rem;
  padding: 0.2rem 0.4rem;
  margin-top: 0.7rem;
  border-radius: 0.2rem;
}
.tagSpan:hover{
  background: rgba(76, 91, 228, 0.295);
}
.input_style {
  width: 100%;
  height: 3rem;
  color: #000;
  border: none;
  outline: none;
}
.choose_sex {
  display: flex;
  line-height: 3rem;
  border-top: 0.1rem solid #f5f5f5;
}
.icon-selected1 {
  padding-right: 0.4rem;
  color: #ccc;
}
.choose_option {
  color: #333;
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
.choose_option span:first-child {
  display: flex;
}
.phone_add {
  display: flex;
  justify-content: center;
  align-content: center;
  padding-bottom: 0.4rem;
}
.icon-jia {
  line-height: 3rem;
  color: blueviolet;
  padding-right: 1rem;
  transform: scale(1.4);
}
.determine {
  text-align: center;
  line-height: 2.5rem;
  margin-top: 0.8rem;
  color: #fff;
  background: #3190e8;
  position: fixed;
  bottom: 0;
  width: 100%;
  font-size:0.9rem;
}
.choosed {
  /* color: #4cd964; */
  fill: #26a2ff; 
}
.mint-button--large {
  margin: 1rem auto;
  width: 90%;
}
.edit_address {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
